<template>
    <div class="commodity">
        <div class="commodityAbout">
            <cast-about></cast-about>
            <ul class="screen">
                <li v-for="(item, key) in screen" :class="{active:key === index}" @click="screenFn(key, item)">{{item}}</li>
            </ul>
            <div class="sizer">
                <span v-for="(item, key) in sizer" :class="{active:key === sizerIndex}" @click="sizerFn(key,item)">{{item}}</span>
            </div>
        </div>
        <div class="product" ref="scrollProduct">
            <div>
                <div class="product-down"></div>
                <merchandise-news :merchandise="product"></merchandise-news>
                <div class="product-on"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "commodity",
        data(){
          return{
              //搜索条件
              searchCriteria:'',
              //商品详细信息
              productDescription:[
                  {
                      img:require('../img/1.jpg'),
                      introduce:'小米(MI)Air 13.3英寸全金属轻薄笔记本(i5-7200U 8G 256G PCle SSD MX150 2G独显 FHD 指纹识别 Win10）银',
                      config:['inter i5 低功耗版','256G固态'],
                      price:4799,
                      selfSupport:true,
                      evaluate:'687466条评价',
                      good:'好评98%'
                  },
                  {
                      img:require('../img/2.jpg'),
                      introduce:"Apple MacBook Air 13.3英寸笔记本电脑 银色(2017新款Core i5 处理器/8GB内存/128GB闪存 MQD32CH/A)",
                      config:['inter i5 低功耗版','128G固态'],
                      price:5988,
                      selfSupport:true,
                      evaluate:'458511条评价',
                      good:'好评98%'
                  },
                  {
                      img:require('../img/3.jpg'),
                      introduce:"联想（ThinkPad） E470c（20H3A013CD）14英寸笔记本电脑（i5-6200U 8G 500G Win10）黑色",
                      config:['inter i5 低功耗版','500G固态'],
                      price:3988,
                      selfSupport:true,
                      evaluate:'687466条评价',
                      good:'好评98%'
                  },
                  {
                      img:require('../img/4.jpg'),
                      introduce:'小米(MI)Air 13.3英寸全金属轻薄笔记本(i5-7200U 8G 256G PCle SSD MX150 2G独显 FHD 指纹识别 Win10）银',
                      config:['inter i5 低功耗版','256G固态'],
                      price:4799,
                      selfSupport:true,
                      evaluate:'687466条评价',
                      good:'好评98%'
                  },
                  {
                      img:require('../img/5.jpg'),
                      introduce:"Apple MacBook Air 13.3英寸笔记本电脑 银色(2017新款Core i5 处理器/8GB内存/128GB闪存 MQD32CH/A)",
                      config:['inter i5 低功耗版','128G固态'],
                      price:5988,
                      selfSupport:true,
                      evaluate:'458511条评价',
                      good:'好评98%'
                  },
                  {
                      img:require('../img/6.jpg'),
                      introduce:"联想（ThinkPad） E470c（20H3A013CD）14英寸笔记本电脑（i5-6200U 8G 500G Win10）黑色",
                      config:['inter i5 低功耗版','500G固态'],
                      price:3988,
                      selfSupport:true,
                      evaluate:'687466条评价',
                      good:'好评98%'
                  },
                  {
                      img:require('../img/7.jpg'),
                      introduce:'小米(MI)Air 13.3英寸全金属轻薄笔记本(i5-7200U 8G 256G PCle SSD MX150 2G独显 FHD 指纹识别 Win10）银',
                      config:['inter i5 低功耗版','256G固态'],
                      price:4799,
                      selfSupport:true,
                      evaluate:'687466条评价',
                      good:'好评98%'
                  },
                  {
                      img:require('../img/8.jpg'),
                      introduce:"Apple MacBook Air 13.3英寸笔记本电脑 银色(2017新款Core i5 处理器/8GB内存/128GB闪存 MQD32CH/A)",
                      config:['inter i5 低功耗版','128G固态'],
                      price:5988,
                      selfSupport:true,
                      evaluate:'458511条评价',
                      good:'好评98%'
                  },
              ],
              product:[],
              // 筛选
              screen:['综合','销量','价格','筛选'],
              //商品信息筛选
              sizer:['京东配送','品牌','屏幕尺寸','内存容量'],
              index:0,
              sizerIndex:'',
              scroll:''
          }
        },
        mounted(){
            //拷贝一份数据
            this.product = this.productDescription;
            //用户输入的商品信息
            this.$bus.$on('storeIpt',(val)=>{
                this.product = this.productDescription;
                this.searchCriteria = val;
                //筛选结果
                this.product = this.product.filter(item=>Object.values(item).some(item=>(item+'').toLowerCase().indexOf(this.searchCriteria)>-1));
            });
            //下页面渲染完成时执行
            this.$nextTick(()=>{
               this.scroll =  new this.$BSscroll(this.$refs.scrollProduct,{
                    startY:0,
                    //动画移动方向
                    scrollY:true,
                    //弹跳的方向
                    bounce:{
                        left:false,
                        right:false,
                        top:true,
                        bottom:true
                    },
                    //动画速率
                    momentum:true,
                    click:true
                });
                this.scroll.on('scroll',(pas)=>{
                    console.log(pas);
                })
            });

        },
        methods:{
            screenFn(key, val){
                this.index = key;
                if(key === 0){
                    this.product = this.productDescription;
                }
            },
            sizerFn(key, val){
                this.sizerIndex = key;
            }
        }
    }
</script>

<style scoped>
    .commodityAbout{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999;
    }
    .screen{
        list-style: none;
        border-bottom:2px solid #B3B3B8 ;
        font-size: 0;
        margin-top: 120px;
        background: #ffffff;
        position: relative;
        z-index: 999;
    }
    .screen>li{
        display: inline-block;
        width: 25%;
        font-size: 30px;
        line-height: 80px;
        text-align: center;
        cursor: pointer;
    }
    .sizer{
        position: relative;
        border-bottom:2px solid #B3B3B8 ;
        font-size: 0;
        background: #ffffff;
        z-index: 999;
    }
    .sizer>span{
        width: 22%;
        box-sizing: border-box;
        text-align: center;
        padding: 8px 12px;
        background: rgba(222,222,222,.3);
        display: inline-block;
        border-radius: 6px;
        margin: 8px 10px;
        font-size: 28px;
        cursor: pointer;
    }
    .active{
        color: orangered;
    }
    .product{
        height: 100vh;
        width: 100vw;
    }
    .product-down{
        width: 100%;
        height: 260px;
        display: inline-block;
    }
</style>
